<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorate="~{layout/default}">
<head>
    <meta charset="UTF-8">
    <title>帝一流</title>
    <link th:href="@{/static/plugin/bootstrap-table/bootstrap-table.css}" type="text/css" rel="stylesheet">
    <link th:href="@{/static/plugin/tagsinput/jquery.tagsinput.css}" type="text/css" rel="stylesheet">
    <link th:href="@{/static/plugin/fakeLoader/fakeLoader.css}" type="text/css" rel="stylesheet">
</head>
<body class="cm-no-transition cm-2-navbar">
<div layout:fragment="cm-flex" class="cm-flex">
    <h1>网址导航</h1>
    <form id="cm-search" action="index.html" method="get">
        <input type="search" name="q" autocomplete="off" placeholder="Search...">
    </form>
</div>
<nav layout:fragment="header-nav" class="cm-navbar cm-navbar-default cm-navbar-slideup">
    <div class="cm-flex">
        <div class="nav-tabs-container">
            <ul class="nav nav-tabs">
                <li class="active"><a th:href="@{/home/guide}">网站列表</a></li>
                <li><a th:href="@{/home/guide.1}">网站排序</a></li>
            </ul>
        </div>
    </div>
</nav>

<div layout:fragment="content" class="container-fluid">
    <div class="panel panel-default auto-height-tab">
        <div class="panel-body">
            <div class="search-block" id="search-block">
                <form action="#" class="form-group form-horizontal">
                    <div class="row">
                        <div class="col-sm-4 col-md-3">
                            <select id="searchType" data-placeholder="选择分组 ..." name="type"
                                    class="form-control chosen-select">
                                <option value=""></option>
                                <option th:each="type:${#request.getAttribute('types')}" th:value="${type.id}"
                                        th:text="${type.name}"></option>
                            </select>
                        </div>
                        <div class="col-sm-6 col-md-4">
                            <input type="text" class="form-control" id="search" placeholder="名称/网址">
                        </div>
                        <div class="col-sm-2 col-md-1 col-md-offset-4">
                            <button type="button" class="btn btn-primary btn-block" id="doSearch">查询</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="btn-group" role="group" id="toolbar">
                <button type="button" class="btn btn-default" id="addSite"><i class="fa fa-fw fa-plus"></i></button>
                <button type="button" class="btn btn-default" id="editSite"><i class="fa fa-fw fa-pencil"></i></button>
                <button type="button" class="btn btn-default" id="delSite"><i class="fa fa-fw fa-trash-o"></i></button>
                <button type="button" class="btn btn-default" id="editType" title="添加分组"><i
                        class="fa fa-fw fa-file-text-o"></i></button>
            </div>
            <table id="siteTable"></table>
        </div>
    </div>
</div>
<div layout:fragment="myJs">
    <div id="siteModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- 提交表单等待 -->
                <div class="loading">
                    <div class="fl spinner3"><div class="dot1"></div><div class="dot2"></div></div>
                </div>

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">×</span></button>
                    <h5 class="modal-title" id="siteModalTitle">
                        添加网址
                    </h5>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="siteForm">
                        <input type="hidden" id="id" name="id">
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="name" name="name" placeholder="名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="url" class="col-sm-2 control-label">网址</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="url" name="url" placeholder="网址">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="selType" class="col-sm-2 control-label">分组</label>
                            <div class="col-sm-10">
                                <select id="selType" data-placeholder="选择分组 ..." name="siteType.id"
                                        class="form-control chosen-select">
                                    <option value=""></option>
                                    <option th:each="type:${#request.getAttribute('types')}" th:value="${type.id}"
                                            th:text="${type.name}"></option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="sort" class="col-sm-2 control-label">排序</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="sort" name="sort" placeholder="排序"
                                       value="0">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="comment" class="col-sm-2 control-label">描述</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" name="comment" id="comment" rows="3"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveSite">保存</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <div id="typeModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">×</span></button>
                    <h5 class="modal-title">
                        编辑分组
                    </h5>
                </div>
                <div class="modal-body">
                    <div class="modal-tag">
                        <input id="typeTag" type="text" class="tags"/>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveType">保存</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <script th:src="@{/static/plugin/bootstrap-table/bootstrap-table.js}"></script>
    <script th:src="@{/static/plugin/tagsinput/jquery.tagsinput.js}"></script>
    <script th:inline="javascript">
        $(function () {
            var autoHeightTab = $("div.auto-height-tab").height();
            var rowHeight = $('#search-block').height();
            var tableHeight = autoHeightTab - rowHeight - 40;

            var $table = $('#siteTable');
            $table.bootstrapTable({
                // 条纹
                striped: true,
                height: tableHeight,
                toolbar: '#toolbar',
                pagination: true,
                paginationLoop: false,
                sidePagination: 'server',
                url: /*[[@{/guide/list}]]*/,
                method: 'post',
                contentType: "application/x-www-form-urlencoded",
                dataField: "data",
                queryParamsType: '',
                queryParams: function queryParams(params) {
                    var param = {
                        pageNo: params.pageNumber,
                        pageSize: params.pageSize,
                        typeId: $('#searchType').val(),
                        search: $('#search').val()
                    };
                    return param;
                },
                formatLoadingMessage: function () {
                    return "正在加载数据中，请稍候……"
                },
                formatShowingRows: function (a, b, c) {
                    return "第 " + a + " / " + b + " 条，共 " + c + " 条 ";
                },
                formatRecordsPerPage: function (a) {
                    return "每页 " + a;
                },
                formatNoMatches: function () {
                    return '没有找到匹配的数据';
                },
                columns: [
                    {
                        field: 'ck',
                        checkbox: true
                    },
                    {
                        field: 'name',
                        title: '名称'
                    },
                    {
                        field: 'url',
                        title: '网址'
                    },
                    {
                        field: 'siteType',
                        title: '分组',
                        formatter: function (value, row, index) {

                            return value.name;
                        }
                    },
                    {
                        field: 'comment',
                        title: '描述'
                    },
                    {
                        field: 'image',
                        title: '图标',
                        align: 'center',
                        formatter: function (value, row, index) {
                            // 相对路径
                            var path = /*[[@{/}]]*/;
                            return '<img style="display: inline-block;width: 16px;height: 16px;" src=' + path + 'guide/image/' + value + '>';
                        }
                    },
                    {
                        field: 'createTime',
                        title: '创建时间',
                        align: 'center'
                    }
                ]
            });

            $('#doSearch').on('click', function () {
                $table.bootstrapTable("refresh");
            });

            $('#searchType').chosen({allow_single_deselect: true});
            $('#addSite').on('click', function () {
                $('#selType').chosen("destroy");
                $('#siteForm')[0].reset();

                $('#siteModalTitle').html('添加网站');
                $('#id').val('');
                document.getElementById('url').readOnly = false;
                $('#siteModal').modal('show');
                $('#selType').chosen();
            });


            $('#siteModal').on('show.bs.modal', function () {
                var h = $(this).find('.modal-dialog').height();
                var w = $(this).find('.modal-dialog').width();
                $(this).find('.loading').height(h);
                $(this).find('.loading').width(w);

                var flH =  $(this).find('.loading .fl').height();
                var flW =  $(this).find('.loading .fl').width();
                $(this).find('.loading .fl').css({
                    'position':'absolute',
                    'left':(w/2)-(flW/2),
                    'top':(h/2)-(flH/2)
                });
            });

            $('#saveSite').on('click', function () {
                var param = $('#siteForm').serialize();
                $.ajax({
                    type: $('#id').val() == '' ? 'post' : 'put',
                    url: /*[[@{/guide/site}]]*/,
                    data: param,
                    dataType: "json",
                    beforeSend: function(){
                        $('#siteModal .loading').fadeIn();
                    },
                    complete: function(){
                        $('#siteModal .loading').fadeOut();
                    },
                    success: function (result) {
                        if (result == 1) {
                            $('#siteModal').modal('hide');
                            $('#siteTable').bootstrapTable('refresh');

                            alertTip('success', '保存成功');
                        } else {
                            alertTip('error', '保存失败');
                        }
                    },
                    error: function () {
                        alertTip('error', '保存失败');
                    }
                });
            });

            $('#editSite').on('click', function () {
                var sites = $table.bootstrapTable('getSelections');
                if (sites.length != 1) {
                    swal("请选择一个网站进行修改!");

                    return;
                }

                // 重置表单
                $('#selType').chosen("destroy");
                $('#siteForm')[0].reset();
                document.getElementById('url').readOnly = true;

                var site = sites[0];
                $('#id').val(site['id']);
                $('#name').val(site['name']);
                $('#url').val(site['url']);
                $('#sort').val(site['sort']);
                $('#comment').val(site['comment']);

                $('#siteModalTitle').html('修改网站');
                $('#siteModal').modal('show');

                var type = site['siteType'];
                if (type) {
                    var tpeId = type.id;
                    var options = document.getElementById('selType').options;
                    for (var i = 0; i < options.length; i++) {
                        var o = options[i];
                        if (o.value == tpeId) {
                            o.selected = true;
                        }
                    }
                }

                $('#selType').chosen();
            });

            $('#delSite').on('click', function () {
                var sites = $table.bootstrapTable('getSelections');
                if (sites.length < 1) {
                    swal("请至少选择一个网站进行删除!");

                    return;
                }
                // 提示
                swal({
                        title: "确定删除选中网站?",
                        text: "删除后将无法恢复",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#e67e22",
                        confirmButtonText: "删除",
                        closeOnConfirm: true
                    },
                    function () {
                        var idArr = [];
                        for (var i = 0; i < sites.length; i++) {
                            idArr[i] = sites[i]['id'];
                        }
                        $.ajax({
                            type: 'delete',
                            url: /*[[@{/guide/site}]]*/,
                            contentType: "application/json;charset=utf-8",
                            data: JSON.stringify(idArr),
                            dataType: "json",
                            success: function (result) {
                                if (result == 1) {
                                    $('#siteModal').modal('hide');
                                    $('#siteTable').bootstrapTable('refresh');

                                    alertTip('success', '删除成功');
                                } else {
                                    alertTip('error', '删除失败');
                                }
                            }
                        });
                    });
            });

            // 字符串处理
            var typeNames = [[${#strings.listJoin(#request.getAttribute('tNames'),',')}]];
            $('#typeTag').tagsInput({defaultText: '新增', width: 'auto', height: 260});
            $('#editType').on('click', function () {
                $('#typeTag').importTags(typeNames);
                $('#typeModal').modal('show');
            });

            $('#saveType').on('click', function () {
                // 提示
                swal({
                        title: "确定修改网站分组?",
                        text: "删除分组后的网站将无法显示",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonColor: "#e67e22",
                        confirmButtonText: "保存",
                        closeOnConfirm: true
                    },
                    function () {
                        $.ajax({
                            type: 'put',
                            url: /*[[@{/guide/type}]]*/,
                            data: {typeNames: $('#typeTag').val()},
                            dataType: "json",
                            success: function (result) {
                                if (result == 1) {
                                    $('#typeModal').modal('hide');
                                    alertTip('success', '保存成功');
                                    location.reload();
                                } else {
                                    alertTip('error', '保存失败');
                                }
                            }
                        });
                    });
            });
        });
    </script>
</div>
</body>
</html>